<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <div class="box">
        <div class="inner-1">
            
        </div>
        <div class="inner-2">

        </div>
        <div class="inner-3">

        </div>
    </div>
    <script>
        // var user = {
        //     'name': '张三',
        //     '父亲': '老张',
        //     '兄长': '张二',
        //     '兄弟': '张五',
        //     '孩子': {
        //         'name': '小张',
        //         '父亲': '张三',
        //         '兄弟': '小二张',
        //     }
        // }
        var box = document.querySelector('.box');
        var inner2El = document.querySelector('.box .inner-2');
        // 1. 兄长
        // previousSibling 在chrome中 获取到了包括回撤节点换行节点等
        // previousSibling 在ie8 是正常的,
        // 但previousElementSibling 在ie8 是undefined
        var preBox = inner2El.previousSibling;
        var preBox2 = inner2El.previousElementSibling;
        console.log('previousSibling',preBox);
        console.log('previousElementSibling',preBox2);
        // 兼容写法  jquery库 也可以完美的解决绝大部分浏览器兼容问题
        var preBoxUse = inner2El.previousElementSibling || inner2El.previousSibling;
        console.log('=========');
        // 尤其注意: 原生的dom接口是属性 非方法!  box.childNodes();
        var childNodesEls = box.childNodes; // 所有的节点
        var childrenEls = box.children; // 所有的dom(标签元素)节点
        console.log('childNodesEls',childNodesEls);
        console.log('childrenEls',childrenEls);

    </script>
</body>
</html>